<template>
  <div class="v-crud--search-bar">
    <!-- 搜索控件 -->
    <custom-render
      v-for="(item, index) in baseConfig.items"
      ref="search-control"
      :key="item.prop + index"
      :render="item.render"
      :value="params[item.prop]"
      :label="item.label"
      :prop="item.prop"
      :options="item.options"
      :dicts="item.dicts"
      class="search-bar__item"
      :style="item.width ? `width:${parseInt(item.width)}px` : undefined"
      @input="onInput(item, $event)"
    />

    <!-- 确认按钮 -->
    <el-button
      type="primary"
      class="confirm-btn"
      @click="confirm"
    >
      确认
    </el-button>

    <el-button
      type="info"
      class="reset-btn"
      @click="reset"
      v-if="baseConfig.useResetButton"
    >
      重置
    </el-button>
  </div>
</template>

<script>
import { cloneDeep, clone, isBoolean } from 'lodash-es'
import CustomRender from '../../../CustomRender'
import { components } from '@lib/default'
import { onControlsEnter, resolveDicts } from '../../utils'

export default {
  components: { CustomRender },

  props: {
    config: { type: Object }
  },

  data() {
    return {
      params: {},
      baseConfig: {}
    }
  },

  inject: ['eventsControler'],

  created() {
    this.baseConfig = this.normalizeConfig()
    this.setDefaultValue()
  },

  mounted() {
    this.eventsControler.emit('set-table-query-params', clone(this.params))
    this.addControlsEnterEvent()
  },

  methods: {
    normalizeConfig() {
      const conf = cloneDeep(this.config)

      conf.items = (conf.items || []).map(item => {
        if (item.component && components[item.component]) {
          item.render = components[item.component]
        }

        if ('dicts' in item) {
          resolveDicts(item)
        }

        item.options = item.options || {}
        return item
      })

      conf.useResetButton = isBoolean(conf.useResetButton) ? conf.useResetButton : true

      return conf
    },
    /**
     * 设置默认值
     */
    setDefaultValue() {
      this.baseConfig.items.forEach(item => {
        if ('defaultValue' in item) {
          this.$set(this.params, item.prop, item.defaultValue)
        }
      })
    },
    onInput({ transform, prop }, value) {
      if (transform) {
        value = transform(value)
      }
      this.$set(this.params, prop, value)
    },
    /**
     * 控件回车键搜索
     */
    addControlsEnterEvent() {
      let controls = this.$refs['search-control']
      if (controls) {
        controls = controls.reduce((res, vm) => {
          const input = vm.$el.getElementsByClassName('el-input__inner')[0]
          if (input) {
            res.push(input)
          }
          return res
        }, [])
        onControlsEnter(controls, this.confirm, this)
      }
    },
    /**
     * 点击确认
     */
    confirm() {
      this.$emit('search', clone(this.params))
    },
    /**
     * 点击重置
     */
    reset() {
      this.params = {}
      this.setDefaultValue()
      this.$emit('search', clone(this.params))
    },
    /**
     * 刷新字典
     */
    refreshDicts(prop) {
      const item = this.baseConfig.items.find(item => item.prop === prop)
      item && item.refreshDicts && item.refreshDicts()
    }
  }
}
</script>

<style lang="less">
.v-crud--search-bar {
  .search-bar__item {
    width: 150px;
    margin: 5px 10px 5px 0;
  }

  .reset-btn {
    margin-left: 3px;
  }
}
</style>
